<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01jQuery属性操作1</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        // html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。
        // text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。
        // val() 它可以设置和获取表单项的 value 属性值。     跟 dom 属性 value 一样
        $(function () {
            // 1. html
            console.log($("#div1").html()); // 获取
            $("#div1").html("<b>我是div2</b>");  // 修改
            let html1 = $("#div1").html(function (index, html) {
                // 回调函数
                console.log("i==", index, "html==", html);
                return html;
            });
            console.log(html1[0]);

            // 类似 html()
            $("#div2").text("<b>我是div2</b>");  // 获取

            // val()
            $("[name='input1']").val("我是 input1");
            $("input:radio").val(["radio2"]);
            $("input:checkbox").val(["check2"]);

        });
    </script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<input name="input1" value="input1"><br>
<input name="input2" value="input2"><br>

<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="love" value="check1"/> check1
<input type="checkbox" name="love" value="check2"/> check2
<input type="radio" name="gender" value="radio1"/> radio1
<input type="radio" name="gender" value="radio2"/> radio2
</body>
</html>